<template>
	<div class="header_bottom">
		<!-- 主页 -->
		<header class="main-head">
			 <van-nav-bar
			 	left-arrow
			 	fixed
				:zIndex="2"
				background="#06d039"
			 	@click-right="onCancel">
			 	<div slot="left">
			 		<van-icon name="location-o"/>
			 		<span>{{positionText}}</span>
			 	</div>
			 	<!--  -->
			 	<form action="/" slot="title" @click="getRanking">
			 	  <van-search
					background="#06d039"
			 	    v-model="value"
			 	    placeholder="请输入关键词搜索"
					disabled
			 	  />
			 	</form>
				<div @click="wxScanCode()" slot="right"  class="shuo">
				  <van-icon name="scan" />
				</div>
			 </van-nav-bar>
		 </header>
		 
		 <!-- <div style="height: 100%;position: relative;"> -->
			 <div ref='wrapper' @scroll="scrollTop" class="comd" :style="{ height: (wrapperHeight-70) + 'px' }">
			 	<mt-loadmore
				:top-method="loadTop"
				:bottom-method="loadBottom"
				@bottom-status-change="handleBottomChange"
				@top-status-change="handleTopChange"
				:bottom-all-loaded="allLoaded"
				:auto-fill="false" ref="loadmore">
			 	<!-- <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="true" :auto-fill="false" ref="loadmore"> -->
			 
			 		<div style="display:block;">
			 			<!-- 商品分类 -->
			 			<van-tabs v-model="active" @click="onClick(active)">
			 				<van-tab v-for="(item,i) in sortList" :key='item.id' :title="item.name">
			 					<div class="nav-box">
			 						<div class="ni-box" v-for="(sort,i) in sortListInfo" :key='i' @click="sortListLink(sort)" v-if="i<=8" >
			 							<div class="ni-img">
			 								<img :src="sort.image_url" :alt="sort.name">
			 							</div>
			 							<p>{{sort.name}}</p>
			 						</div>
									<div class="ni-box" @click="sortLink(item)" v-show='sortListInfo.length>8'>
			 							<div class=" more">
			 								<van-icon name="ellipsis" />
			 							</div>
			 							<p>查看更多</p>
			 						</div>
			 					</div>
			 				</van-tab>
			 			</van-tabs>
						
						
			 			<div class="hos-list">
			 				<div class="top-img" ref='qwer'>
			 					<img src="https://image.soole.com.cn/%E5%8C%80%E8%B4%B8%E7%83%AD%E9%94%80%E6%A6%9C.png" alt="">
			 				</div>
			 
			 				<div class="commodity-list">
			 					<div class="item-box" v-for="(item,i) in commodityList" :key="i">
			 						<div class="item-img" @click="shopLink(item)">
			 							<img :src="item.product_image_url" alt="" :style="{ height: imageWidthAndHeight + 'px',width:imageWidthAndHeight + 'px'}">
			 						</div>
			 						<div class="item-text">
			 							<div class="item-name">
			 								{{item.name}}
			 							</div>
			 							<div class="item-price">
			 								<div>
			 									<span class="price1"><span>￥</span>{{item.price}}</span>
			 									<span class="price2">￥{{item.price*2}}</span>
			 								</div>
			 								<div class="item-count">已拼15.9万</div>
			 							</div>
			 						</div>
			 					</div>
			 				</div>
			 
			 			</div>
			 		</div>
					<!-- <div slot="top" class="mint-loadmore-top">
					   <span v-show="topStatus !== 'loading'" :class="{ 'is-rotate': topStatus === 'drop','top-style':true }">↓</span>
					   <span v-show="topStatus === 'loading'">
					     <mt-spinner></mt-spinner>
					   </span>
					 </div>
					 <div slot="bottom" class="mint-loadmore-bottom">
					   <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
					   <span v-show="bottomStatus === 'loading'">
					     <mt-spinner></mt-spinner>
					   </span>
					 </div> -->
			 	</mt-loadmore>
				<!-- 没有更多了 -->
				<to-load v-show="allLoaded"></to-load>
			 </div>
		<!--交易动态-->
		<!-- <cover></cover> -->
		<!-- 底部 -->
		<appFooter :active="0"></appFooter>
		
		<!-- 高德地图配置组件 -->
		 <positionMap ref="pMap"></positionMap>
		 <!-- 回到顶部 -->
		 <goTop :st_bool='st_bool' @toTop='toTop' @toBottom='toBottom'></goTop>
		 
	</div>
</template>

<script>
	import appFooter from '@/components/appFooter.vue'
	import positionMap from '@/components/positionMap.vue'
	
	window.οnlοad = function() {
		setTimeout(function() {
			window.scrollTo(0, 1)
		}, 0);
	};
	export default {
		data() {
			return {
				navList: [],
				active: 0, //默认显示分类
				commodityList: [], //商品数据
				pageNumBottom: 1, //页码
				allLoaded: false,
				positionAddress:{},//地址(全)
				positionText:"",//地址
				value:'',//搜索
				id:0,
				wrapperHeight:0,//自适应高度
				sortList:[],//分类列表
				sortListInfo:[],//点击分类父级id
				st_bool:false,//是否滑动
				imageWidthAndHeight:0,//图片宽度和高度
				bottomStatus: '',//上拉状态
				topStatus: '',//下拉状态 

			}
		},
		components: {
			appFooter,
			positionMap,
		},
		created() {
			this.getCommodityList();
			this.getSortList();
			// let wpr = this.$refs.wrapper;
			
		},
		mounted() {
			 // 父控件要加上高度，否则会出现上拉不动的情况
			this.wrapperHeight =
			  document.documentElement.clientHeight -
			  this.$refs.wrapper.getBoundingClientRect().top;
			
			this.imageWidthAndHeight = Math.floor(Number(document.body.clientWidth) * 0.49) ;
		},
		watch: {
		  //获取定位地址
		  positionAddress() {
		    if (this.positionAddress&&this.positionAddress.addressComponent) {
		      this.positionText =
		        // this.positionAddress.addressComponent.province
		        this.positionAddress.addressComponent.district;
		    }
		  }
		},
		methods: {
			//改变上拉状态
			handleBottomChange(status) {
			  this.bottomStatus = status;
			},
			//改变下拉状态
			handleTopChange(status) {
			  this.topStatus = status;
			},
			onCancel(){
				// this.getRanking();
			},
			//跳转搜索详细
			getRanking() {
			  this.$router.push('/About');
			},
			//跳转商品详情页
			shopLink(val) {
			  this.$router.push({
			    // name: '商品详情',
				path:'/ProductDetails',
			    query: {id: val.id}})
			},
			//跳转更多分类
			sortLink(item){
				this.$router.push({path:'/moreSort',query:{id:item.id}});
			},
			// //面对面
			// toFace(){
			// 	this.$toast("敬请期待")
			// },
			onClick(active) {
				console.log(active)
				this.id = this.sortList[active].id
				this.getSortListInfo(this.id);
			},
			//跳转指定分类商品列表
			sortListLink(sort){
				var this_ = this;
				var id = this_.id ? this_.id : this_.sortList[0].id;
				this.$router.push({path:'/sortDetail',query:{name:sort.name,id:id}});
				// console.log(sort)
			},
			//分类列表
			async getSortList() {
				let params = {};
				// var urlDate = 'parentId=461';
				var urlDate = 'parentId=4';
				const res = await this.$axios.get(this.$api.sortData+'?'+urlDate);
				if (res.success) {
					console.log(res)
					this.sortList = res.data;
					this.getSortListInfo(res.data[0].id);
				} else {
					this.$toast(res.msg);
				}
			},
			//分类列表详细
			async getSortListInfo(id) {
				let params = {};
				var urlDate = `parentId=${id}&isAll=1`;
				const res = await this.$axios.get(this.$api.sortData+'?'+urlDate);
				if (res.success) {
				  this.sortListInfo = res.data;
				} else {
				  this.$toast(res.msg);
				}
			},
			//商品列表
			async getCommodityList() {
				let params = {
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					salesMode: 7, //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					// activityTime:"13",//
				};
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.commodityList = res.data.list;
					this.$refs.loadmore.onTopLoaded();
					this.isHaveMore(res.data.nextPage);
				} else {
					this.$toast(res.msg);
					this.allLoaded = true; //true是禁止上拉加载
				}
			},
			//上拉刷新·
			loadTop() {
				this.loadFrist();
			},
			loadBottom() {
				this.loadMore();
			},
			// 下来刷新加载
			async loadFrist() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom = 1;
				let params = {
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					salesMode: 7, //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					// activityTime:"13",//
				};
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.commodityList = res.data.list;
					this.$refs.loadmore.onTopLoaded();
					this.isHaveMore(res.data.nextPage);
				} else {
					this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},
			// 加载更多
			async loadMore() {
				this.$store.commit('noLoadEnabled');
				this.pageNumBottom += 1;
				let params = {
					pageNum: this.pageNumBottom, //页码
					pageSize: 10, //每页条数
					salesMode: 7, //商品类型，7普通商品，8动感地带，9实体联盟，10九块九包邮，11秒杀
					// activityTime:"13",//
				};
				const res = await this.$axios.post(this.$api.shopListData, params);
				if (res.success) {
					this.commodityList = this.commodityList.concat(res.data.list);
					this.isHaveMore(res.data.nextPage);
					this.$refs.loadmore.onBottomLoaded();
				} else {
					this.$toast(res.msg);
				}
				this.$store.commit('yesLoadEnabled');
			},
			isHaveMore(isHaveMore) {
				// 是否还有下一页，如果没有就禁止上拉刷新
				this.allLoaded = true; //true是禁止上拉加载
				if (isHaveMore) {
					this.allLoaded = false;
				}
			},

			//进入详情
			//获取商品分类
			async getClassification() {
				let params = {};
				const res = await this.$axios.get(this.$api.navData, params);
				if (res.success) {
					this.navList = res.data;
				} else {
					this.$toast(res.msg);
				}
			},
			//根据商品分类id跳转详情
			toLink(item) {
				this.$router.push({
					name: '商品列表',
					query: {
						id: item.id,
						name: item.name
					}
				});
			},
			toLinkFen() {
				this.$router.push({
					path: '/allCategories'
				});
			},
			
			//微信扫一扫
			wxScanCode() {
			  $.ajax({
			    type: "POST",
			    url: "后端提供的接口",
			    data: {
			      url: window.location.href.split("#")[0] // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
			    },
			    dataType: "json",
			    success: function(result) {
			      console.log("result", result);
			      // 后端返回的参数
			      var timestamp = result.timestamp;
			      var noncestr = result.nonceStr;
			      var signature = result.signature;
			      var appId = result.appId;
			      wx.config({
			        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			        appId: appId, // 必填，公众号的唯一标识
			        timestamp: timestamp, // 必填，生成签名的时间戳
			        nonceStr: noncestr, // 必填，生成签名的随机串
			        signature: signature, // 必填，签名，见附录1
			        jsApiList: [
			          "checkJsApi",
			          "onMenuShareTimeline",
			          "onMenuShareAppMessage",
			          "onMenuShareQQ",
			          "onMenuShareWeibo",
			          "hideMenuItems",
			          "showMenuItems",
			          "hideAllNonBaseMenuItem",
			          "showAllNonBaseMenuItem",
			          "translateVoice",
			          "startRecord",
			          "stopRecord",
			          "onRecordEnd",
			          "playVoice",
			          "pauseVoice",
			          "stopVoice",
			          "uploadVoice",
			          "downloadVoice",
			          "chooseImage",
			          "previewImage",
			          "uploadImage",
			          "downloadImage",
			          "getNetworkType",
			          "openLocation",
			          "getLocation",
			          "hideOptionMenu",
			          "showOptionMenu",
			          "closeWindow",
			          "scanQRCode",
			          "chooseWXPay",
			          "openProductSpecificView",
			          "addCard",
			          "chooseCard",
			          "openCard"
			        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
			      });
			      wx.ready(function() {
			        wx.scanQRCode({
			          needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
			          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
			          success: function(res) {
			            var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
			            // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
			            // alert(result);
			            // location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
			            // sessionStorage.setItem('saomiao_result',result);
			            //其它网页调用二维码扫描结果：
			            // var result = sessionStorage.getItem("saomiao_result");
			            console.log(result);
			          },
			          error: function(res) {
			            console.log(res);
			          }
			        });
			      });
			    }
			  });
			},
			//滑动top 回到顶部，回到底部
			scrollTop(){
				if (this.$refs.wrapper.scrollTop>60) {
				  this.st_bool=true;
				}else {
				  this.st_bool=false;
				}
			},
			toTop(i){
			  //参数i表示间隔的幅度大小，以此来控制速度
			  this.$refs.wrapper.scrollTop-=i;
			  var c= 0;
			  if (this.$refs.wrapper.scrollTop>0) {
			    c=setTimeout(()=>this.toTop(i),16);
			  }else {
			    clearTimeout(c);
			  }
			},
			toBottom(i){
			  var clientHeight=this.$refs.wrapper.clientHeight;
			  var scrollHeight=this.$refs.wrapper.scrollHeight;
			  var height=scrollHeight-clientHeight; //超出窗口上界的值就是底部的scrolTop的值
			  this.$refs.wrapper.scrollTop+=i;
			  if (this.$refs.wrapper.scrollTop<height) {
			    var c=setTimeout(()=>this.toBottom(i),16);
			  }else {
			    clearTimeout(c);
			  }
			},
		}

	}
</script>


<style lang="less" scoped>
	@main-w: 96%;
	body {
		background: #F7F7F7;
	}
	.van-search{
		padding: 6px 12px;
	}
	.van-nav-bar__title{
		max-width: 76%;
		padding-left: 30px;
		margin: 0 auto;
		
	}
	.van-search__content{
		border-radius: 86px;
	}

	//宫格导航
	.van-tab__pane {
		background-color: #eee;
	}

	.nav-box {
		width: @main-w;
		background: #fff;
		margin: 7px auto;
		border-radius: 6px;
		height: 185px;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
		padding-top: 8px;
		.ni-box {
			width: 18%;
			margin: 0 1%;
			.ni-img{
				height: 58px;
			}
			p {
				line-height: 20px;
				height: 20px;
				font-size: 12px;
				color: #333333;
			}
		}

		.more {
			line-height: 45px;
			background: #E8E8E8;
			color: #fff;
			font-size: 15px;
			width: 30px;
			height: 30px;
			margin: 15px auto 14px auto;
			border-radius: 6px;
		}
		img {
			height: 100%;
			max-width: 58px;
		}
	}

	// .mint-loadmore-top span {
	//     -webkit-transition: .2s linear;
	//     transition: .2s linear
	// }
	// .mint-loadmore-top span {
	//     display: inline-block;
	//     vertical-align: middle
	// }
	 
	// .mint-loadmore-top span.is-rotate {
	//     -webkit-transform: rotate(180deg);
	//     transform: rotate(180deg)
	// }
	// .mint-loadmore-bottom span {
	//     display: inline-block;
	//     -webkit-transition: .2s linear;
	//     transition: .2s linear;
	//     vertical-align: middle
	// }
	 
	// .mint-loadmore-bottom span.is-rotate {
	//     -webkit-transform: rotate(180deg);
	//     transform: rotate(180deg)
	// }
	// .top-style{
	// 	font-size: 25px;
	// }
	//面对面
	// .f-to-f {
	// 	width: @main-w;
	// 	margin: 0 auto;
	// 	img {
	// 		width: 100%;
	// 	}
	// }

	//热卖商品
	.hos-list {
		width: 100%;

		.top-img {
			width: 170px;
			margin: 7px auto 12px auto;
		}

		.commodity-list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			justify-content: space-between;

			.item-box {
				width: 49%;
				margin-bottom: 10px;
				background: #fff;
				border-radius: 5px;
				overflow: hidden;

				.item-img {
					// height: 185px;
					
					img {
						// display: block;
						width: 100%;
						height: 100%;
					}
				}

				.item-text {
					padding: 5px 6px;

					.item-name {
						height: 40px;
						margin-bottom: 10px;
						overflow: hidden;
						text-align: left;
						color: #333333;
						font-size: 14px;
						overflow:hidden;
						text-overflow:ellipsis;
						display:-webkit-box;
						-webkit-box-orient:vertical;
						-webkit-line-clamp:2; 
					}
					.item-price {
						display: flex;
						justify-content: space-between;

						.price1 {
							color: #D30E0F;
							font-size: 16px;
							font-weight: 700;

							span {
								font-weight: 100;
								font-size: 14px;
							}
						}

						.price2 {
							font-size: 12px;
							color: #ccc;
						}

						.item-count {
							color: #ccc;
						}
					}
				}
			}
		}
	}
	// @import '../../assets/css/index.css';
	.header_bottom {
		text-align: center;
		display: block;
		.comd{
			// margin-top: 46px;
			padding-top: 46px;
			overflow-y:auto;
			overflow-x:hidden; //设置Y轴出现滚动条，X轴隐藏
			.van-tabs{
				min-height: 235px;
			}
		}
		.comdList {
			height: 700px;
			overflow: auto;
		}
		//导航
		.van-nav-bar{
			background: #06d039;
			.van-nav-bar__text,.van-nav-bar__left{
				color: #fff;
			}
			.van-nav-bar__title{
				color: #141414;
			}
		}
	}
</style>
